<template>
	<view class="page-content">
		<view class="container">
			<view class="locale-setting">{{$t('language.language-info')}}</view>
			<view class="list-item">
				<text class="k">{{$t('language.system-language')}}:</text>
				<text class="v">{{systemLocale}}</text>
			</view>
			<view class="list-item">
				<text class="k">{{$t('language.application-language')}}:</text>
				<text class="v">{{applicationLocale}}</text>
			</view>
			<view class="locale-setting">{{$t('language')}}</view>
			<view class="locale-list">
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
					<text class="text">{{item.text}}</text>
					<text class="icon-check" v-if="item.code == applicationLocale"></text>
				</view>
			</view>
		</view>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>

</template>

<script>
  export default {
    data() {
      return {
        systemLocale: '',
        applicationLocale: '',
		scrollTop:0
      }
    },
	onLoad(option){
	},
	onReady(){
		// if(this.$wechat.isWechat()) this.$util.navTitle()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
    computed:{
      locales() {
        return [
			// {
   //          text: this.$t('locale.auto'),
   //          code: 'auto'
   //        }, 
		  {
            text: this.$t('locale.en'),
            code: 'en'
          },
          {
            text: this.$t('locale.zh-hans'),
            code: 'zh-Hans'
          },
          {
            text: this.$t('locale.zh-hant'),
            code: 'zh-Hant'
          },
          // {
          //   text: this.$t('locale.ja'),
          //   code: 'ja'
          // }
        ]
      }
    },
    onLoad() {
      let systemInfo = uni.getSystemInfoSync();
      this.systemLocale = systemInfo.language;
      this.applicationLocale = uni.getLocale();
      this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
      uni.onLocaleChange((e) => {
        this.applicationLocale = e.locale;
      })
    },
    methods: {
		
      onLocaleChange(e) {
        if (this.isAndroid) {
          uni.showModal({
            content: this.$t('language.change-confirm'),
            success: (res) => {
              if (res.confirm) {
                uni.setLocale(e.code);
              }
            }
          })
        } else {
          uni.setLocale(e.code);
          this.$i18n.locale = e.code;
        }
      }
    }
  }
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.container{
		margin: 20px;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
	}
	.locale-setting{
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}
	.locale-setting:first-child{
		margin-top: 0;
	}
	
	.list-item {
		font-size: 28rpx;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 20rpx;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
		font-size: 28rpx;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>
